<template>
  <div class="profile_layout">
    <Navigation></Navigation>
    <div class="profile_content">
      <div class="profile_content_header">
        <UserInfo :user="this.user"></UserInfo>
        <el-upload
            action="http://localhost:1110/upload_image?mock_login=123"
            list-type="picture-card">
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
    </div>
  </div>
</template>

<script>
import Navigation from "@/components/navigation/Navigation";
import UserInfo from "@/components/common/UserInfo";
import {UserMe} from "@/user";

export default {
  name: "Profile",
  data() {
    return {
      user: UserMe,
    }
  },
  components: {UserInfo, Navigation}
}
</script>

<style scoped>

.profile_layout {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile_content {
  margin-top: 5vh;
  width: 70%;
  border: solid;
  background-color: white;

}

.profile_content_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>